<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>绑定 HTML Class</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div  id="app" class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
        <p>对象语法</p>
    </div>

    <div id="app-2" v-bind:class="classObject">
        <p>app-2</p>
    </div>

    <div id="app-3" v-bind:class="classObject">
        <p>app-3</p>
    </div>

    <div id="app-4" v-bind:class="[activeClass, errorClass]">
        <p>app-4</p>
    </div>

    <div id="app-5" v-bind:class="[isActive ? activeClass : '', errorClass]">
        <p>app-5</p>
    </div>


    <my-component class="baz boo"></my-component>
    <my-component2 v-bind:class="{ active: isActive }"></my-component2>

    <script>
        // 对象语法
        var vm1 = new Vue({
            el: '#app',
            data: {
                isActive: true,
                hasError: false
            }
        })

        var vm2 = new Vue({
            el: '#app-2',
            data: {
                classObject: {
                    activate: true,
                    'text-danger': true
                }
            }
        })

        var vm3 = new Vue({
            el: '#app-3',
            data: {
                isActive: true,
                error: {
                    // value: true,
                    type: 'fatal'
                }
            },
            computed: {
                classObject: function () {
                    return {
                        activate: this.isActive && !this.error,
                        'text-danger': this.error && this.error.type === 'fatal'
                    }
                }
            }
        })


        // 数组语法
        var vm4 = new Vue({
            el: '#app-4',
            data: {
                activeClass: ['active', 'active2', 'active3'],
                errorClass: ['text-danger', 'text-danger2']
            }
        })

        // 数组语法之三元表达式
        var vm5 = new Vue({
            el: '#app-5',
            data: {
                isActive: false,
                // isActive: 42,   //只要是真值就行truthy
                activeClass: ['active', 'active2', 'active3'],
                errorClass: ['text-danger', 'text-danger2']
            }
        })

        // 用在组件上 ???
        Vue.component('my-component', {
            template: '<p class="foo1 bar1">用在组件上</p>'
        })
        Vue.component('my-component2', {
            isActive: 11,
            template: '<p class="foo2 bar2"></p>'
        })
    </script>


</body>
</html>